<script setup>
import { ref } from 'vue';

const clickCount = ref(0);
const isLoading = ref(false);

const handleClick = () => {
  clickCount.value++;
};

const startLoading = () => {
  isLoading.value = true;

  // Simulate loading for 2 seconds
  setTimeout(() => {
    isLoading.value = false;
  }, 2000);
};
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Button Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Button</h3>
        <div class="flex flex-col space-y-4">
          <Button @click="handleClick">Default Button</Button>
          <div v-if="clickCount > 0">Button clicked {{ clickCount }} times</div>

          <Button disabled>Disabled Button</Button>

          <Button appearance="primary">Primary Button</Button>

          <Button appearance="outline">Outline Button</Button>

          <Button appearance="subtle">Subtle Button</Button>

          <Button appearance="transparent">Transparent Button</Button>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Button Variations</h3>
        <div class="flex flex-col space-y-4">
          <div>
            <h4 class="mb-2 text-sm font-medium">Button Sizes</h4>
            <div class="flex items-end space-x-2">
              <Button size="small">Small</Button>
              <Button size="medium">Medium</Button>
              <Button size="large">Large</Button>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Icon Buttons</h4>
            <div class="flex space-x-2">
              <Button>
                <template #start>
                  <span class="material-icons">⭐</span>
                </template>
                With Icon
              </Button>

              <Button>
                With Icon
                <template #end>
                  <span class="material-icons">➡️</span>
                </template>
              </Button>

              <Button appearance="primary" icon>
                <span class="material-icons">📄</span>
              </Button>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Loading Button</h4>
            <div class="flex space-x-2">
              <Button :loading="isLoading" @click="startLoading">
                {{ isLoading ? 'Loading...' : 'Click to Load' }}
              </Button>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Button Shape</h4>
            <div class="flex space-x-2">
              <Button shape="rounded">Rounded</Button>
              <Button shape="circular">Circular</Button>
              <Button shape="square">Square</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
